<template>
    <el-dialog :title="editContactTitle" :visible.sync="$store.state.company.showContactDialog"
               center width="700px" >

        <el-form :model="contact" :rules="rules" :label-position="$store.labelPosition"
                 label-width="30%" ref="contact">
            <el-row>
                <el-col  :span="12">
                    <el-form-item label="姓名：" prop="name">
                        <el-input v-model="contact.name" :disabled="isViewContact"></el-input>
                    </el-form-item>
                </el-col>
                <el-col  :span="12">
                    <el-form-item label="手机：" prop="mobile">
                        <el-input v-model="contact.mobile" :disabled="isViewContact"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="contact.email" :disabled="isViewContact"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="qq：" >
                        <el-input v-model="contact.qq" :disabled="isViewContact"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="hideEditDialog()">取 消</el-button>
            <el-button type="primary" @click="saveContact()" v-if="!isViewContact">确 定</el-button>
        </div>

    </el-dialog>

</template>

<script>
import { mapState } from 'vuex'

export default {
    name: "ContactEdit",
    data() {
        return {
            rules:{
                name:[{ required: true, message: '请输入联系人姓名', trigger: ['blur'] }],
                mobile:[{ required: true, message: '请输入联系人手机', trigger: ['blur'] }],
                email:[{ type: 'email', message: '无效的邮箱', trigger: ['blur'] }],
            }
        }
    },

    computed: {
        ...mapState({
            units: state => state.company.initPageData.units,
            contact: state => state.company.contact,
            isViewContact: state => state.company.isViewContact
        }),

        editContactTitle(){
            if(this.isViewContact){
                return "查看联系人";
            }
            return this.contact.id > -1 ? "编辑联系人" : "增加联系人";
        }
    },

    methods: {
        saveContact(){
            this.$refs['contact'].validate((valid) => {
                console.log("表单验证：", valid);
                if (valid) {
                    if(this.contact.id  === -1 ){
                        this.addContact();
                    }else{
                        this.editContact();
                    }
                    this.hideEditDialog();

                } else {
                    console.log('保存产品验证不通过');
                    return false;
                }
            });
        },

        async addContact(){
            await this.$axios.post('/contact', this.contact);
            this.$store.dispatch("company/findContactsByCompanyId");
            //this.$myMsg.success('成功创建产品信息。');
        },

        async editContact(){
            await this.$axios.put('/contact', this.contact);
            this.$store.dispatch("company/findContactsByCompanyId");
            //this.$myMsg.success('成功编辑产品信息。');
        },

        hideEditDialog(){ // 关闭弹出窗口
            this.$store.commit("company/Hide_Contact_Dialog");
        }
    }
}
</script>

